<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>收容社区</title>
    <link rel="stylesheet" type="text/css" href="/css/font-awesome.4.6.0.css">
    <link rel="stylesheet" href="/css/amazeui.min.css">
    <link rel="stylesheet" href="/css/amazeui.cropper.css">
    <link rel="stylesheet" href="/css/custom_up_img.css">
    <link href="/css/bootstrap.css" rel="stylesheet">
    <link href="/css/bootstrap-theme.css" rel="stylesheet">
    <link href="/css/pet.css" rel="stylesheet">
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script src="/js/pet.js"></script>
    <script src="/js/bootstrap.js" type="application/javascript"></script>

    <style type="text/css">
        .up-img-cover {
            width: 100px;
            height: 100px;
        }

        .up-img-cover img {
            width: 100%;
        }

        #box-1 {
            width: 200px;
            height: 200px;
            border: 1px solid gray;
            border-radius: 50%;
        }

        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;

        }

    </style>

    <script type="text/javascript">
        $(function () {
            //在input file内容改变的时候触发事件
            $('#choose-file').change(function () {
                //获取input file的files文件数组;
                //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
                //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
                var file = $('#choose-file').get(0).files[0];
                //创建用来读取此文件的对象
                var reader = new FileReader();
                //使用该对象读取file文件
                reader.readAsDataURL(file);
                //读取文件成功后执行的方法函数
                reader.onload = function (e) {
                    //读取成功后返回的一个参数e，整个的一个进度事件
                    console.log(e);
                    //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
                    //的base64编码格式的地址
                    $('#show-img').get(0).src = e.target.result;
                }
            });

            //隐藏input file控件
            $("#choose-file").hide();

            $("#box-1").bind('click', function () {
                //当点击头像框时，就会弹出文件选择对话框
                $("#choose-file").click();

            });

        });

        function postArgs() {
            var sendId = $("#sendId").val();
            var receviceId = $("#receviceId").val();
            var content = $("#content").val();
            if (content != null) {
                $.post("/privateContent", {sendid: sendId, receviceId: receviceId,content:content}, function (data) {
                    $("#personInfoList").html(data);
                })
            }
        }
    </script>


</head>
<body background="/img/background.jpg" style="background-size: cover">
<!--导入模板 -->
<div th:insert="~{navgation :: copy}"></div>

<div class="container-fluid main">
    <div class="row">

        <!--            左边-->
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <h2><span class="glyphicon glyphicon-object-align-right persontitle" aria-hidden="true"
                      style="color: #777;"></span> 个人私聊中心</h2>
            <hr>
            <div class="media">
                <div class="list-group">
                    <a class="list-group-item active">
                        私聊名单
                    </a>
                    <!--                           私聊名单列表-->
                    <div th:each="person : ${personList}">
                        <input th:value="${person.sendId}" id="personList" type="hidden">
                        <img class="media-object img-rounded"
                             th:src="${person.personSendAratorUrl}" style="margin-bottom: -37px;">
                        <a class="list-group-item" th:text="${person.sendName}"
                           a href="javascript:void(0);" onclick="chooseperson()"
                           style="width: 156px;margin-left: 41px;"></a>
                    </div>
                </div>

            </div>
        </div>

        <!--            右边-->
        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 " style="margin-top: 89px;"
             th:if="${personInfoList} != null">
                <table width="100%" border="0">
                    <tr>
                        <div class="panel panel-default" style="height: 300px;" id="personInfoList">
                            <div class="panel-body" th:each="personinfo : ${personInfoList}" >
                                <div>
                                    <span th:text="${personinfo.sendName}"></span> ：
                                    <span th:text="${personinfo.content}"></span>
                                </div>
                                <input th:value="${personinfo.sendId}" name="sendId" id="sendId">
                                <input th:value="${personinfo.receiveId}" name="receviceId" id="receviceId">
                            </div>
                        </div>
                    </tr>
                    <tr>

                        <div class=" input-group" style="margin-bottom: 26px;">
                            <input type="text" class="form-control" placeholder="想说什么好呢...？" id="content"
                                   name="content">
                            <span class="input-group-btn">
                <button class="btn btn-default" type="submit" onclick="postArgs();">Go!</button>
                </span>
                        </div>
                    </tr>
                </table>
        </div>

    </div>
</div>

</body>
</html>